<template lang="pug">
.form_wrap
  .header
    //- img(src="../../src/assets/zuo.png", alt="alt")
    i.iconfont.icon-fanhui(@click="$router.go(-1)")
    p 新增地址
  .content
    van-cell-group
      van-field(label="收货人 :", v-model="params.buyer_name")
      van-field(type="tel", , label="手机号码 :", v-model="params.buyer_phone")
      van-field(
        type="tel",
        label="所在地区 :",
        @click="onShow",
        v-model="params.buyer_address"
      )
      van-field(label="详细地址 :", v-model="params.area_code")
      .fieldBox
        span 选择默认地址
        van-checkbox(
          v-model="fieldShow",
          shape="square",
          checked-color="rgb(255,103,0"
        )
    van-popup(
      v-model="show",
      round,
      position="bottom",
      :style="{ height: '50%' }"
    )
      van-area(
        title="标题",
        :area-list="areaList",
        :columns-placeholder="['请选择', '请选择', '请选择']",
        @confirm="onConfirm",
        :style="{ height: '50%' }"
      )
  .footer
    button(@click="emit") 保存地址
</template>
<script>
import Vue from "vue";
import { Field } from "vant";
import { Popup } from "vant";
import { areaList } from "@vant/area-data";
import { Area } from "vant";
import { Notify } from "vant";
import { Checkbox, CheckboxGroup,CellGroup} from "vant";
import { Dialog } from 'vant';
Vue.use(Checkbox);
Vue.use(CellGroup);
Vue.use(CheckboxGroup);
Vue.use(Area);
Vue.use(Popup);
Vue.use(Field);
export default {
  data() {
    return {
      show: false, //定义底部弹框
      areaList, //全国省份信息
      fieldShow: false, //定义默认地址复选框
      params: {
        // 接口数据
        buyer_name: "",
        buyer_phone: "",
        buyer_address: "",
        area_code: "",
      },
    };
  },
  methods: {
    onShow() {
      this.show = true;
    },
    onConfirm(e) {
      if (
        e.every((item) => {
          return item != undefined;
        })
      ) {
        this.params.buyer_address = "";
        console.log(e);
        e.map((item) => {
          return item.name;
        }).forEach((item) => {
          this.params.buyer_address += item + " ";
        });
        // console.log(this.params.buyer_address);
        this.show = false;
      } else {
        Notify("请选择");
        return;
      }
    },
    emit() {
      console.log(this._.values(this.params));
      if (
        this._.values(this.params).every((item) => {
          return item != "";
        })
      ) {
        if (this.params.buyer_phone.length != 11) {
          console.log("手机号出错");
          Dialog.alert({ message: '手机号格式不正确' ,theme: 'round-button',})
          return
        } else if (this.params.area_code.length < 5) {
          console.log("详细地址出错");
          Dialog.alert({ message: '详细地址最少为五个字符' ,theme: 'round-button',})
          return
        }
        console.log("提交");
        this.$http.get('http://192.168.43.168:8082/user/add-addren',{
          params:{
            ...this.params
          }
        }).then(data=>{
          if(data.status==200){
            this.$router.back()
          }
        }).catch(err=>{
          console.log(err)
        })
      } else {
        console.log("报错");
        Dialog.alert({ message: '请完善地址信息' ,theme: 'round-button',})
      }
    },
  },  
  created(){
    this.$store.commit('setIsShow',false)
  },
};
</script>
<style lang="sass" scoped>
.form_wrap
  width: 3.75rem
  .header
    height: .5rem
    width: 3.75rem
    background: rgb(242,242,242)
    display: flex
    align-items: center
    position: fixed
    left: 0
    top: 0
    z-index: 10
    i
      margin-left: .1rem
      padding: .05rem
    p
      width: 100%
      text-align: center
      margin-left: -.1rem
  .content
    width: 100%
    padding: 0 .15rem
    margin-top: .42rem
    .van-cell-group
      width: 100%
      .van-cell
        border-bottom: 1px solid rgb(246,246,246)
        height: .6rem
        display: flex
        align-items: center
        flex-wrap: wrap
    .fieldBox
      width: 100%
      height: .42rem
      display: flex
      justify-content: space-between
      align-items: center
      padding: 0 .16rem
      font-size: .14rem
      color: rgb(100,101,102)
  .footer
    width: 100%
    position: fixed
    left: 0
    bottom: 0
    button
      width: 100%
      height: .48rem
      color: #fff
      background: rgb(255,103,0)
</style>
